<template>
	<view class="content">
		<uni-list class="electric-list">
			<uni-list-item :padding="24" v-for="(item, index) in electricList" :key="index"
				:title="'焊接编号' + item.F_WeldNum"
				:note="item.F_WeldTime"
				:rightText="item.totalResult"
        :rightColor="item.finalColor"
				:thumb="item.electricImage"
				@click="toElectricDetail(index)"/>
		</uni-list>
		<view class="all-complete">{{totalPage ? '已加载全部' : '没有符合条件的记录'}}</view>
		<message ref="message"></message>
	</view>
</template>

<script>
	import uniList from '@/components/uni/uni-list.vue'
	import uniListItem from '@/components/uni/uni-list-item.vue'
	import {list} from "../../api/electric/list";

  import store from "@/store/index.js"

	export default {
		data() {
			return {
				electricList: [],
				query: {
					// 分页条件
					pagination: {
						rows: 20,
						page: 1
					},
					// 查询条件
					queryJson: {
						StartTime: '',
						EndTime: '',
						F_ProjectCode: '',
						F_MachineCode: '',
						F_WelderName: '',
						F_ResultId: ''
					}
				},
				// 是否是上拉加载更多，如果是，那么要把数据push到projectList中；如果不是那么要把数据替换projectList
				ifLoadMore: false,
				// 总页数
				totalPage: 0
			}
		},
		methods: {
			/**
			 * 获取电熔记录数据
			 */
			getList(callback) {
				list(this.query).then(res => {
					console.log(res);
					if (res.data.code === 200) {
						let list = res.data.data.rows.map(item => {
							this.assignElectricImage(item);
							this.assignTotalResultAndColor(item);
							return item;
						})
						if (this.ifLoadMore) {
							this.electricList.push(...list);
						} else {
							this.electricList = list;
						}
						this.totalPage = res.data.data.total;
						callback && callback()
					}
				})
			},
			/**
			 * 给获取到的数据添加electricImage字段，该字段是显示的图片url
			 * @param item 电熔记录
			 */
			assignElectricImage(item) {
				item.electricImage =
					item.F_ResultCode === '1' && (item.F_ApperenceCode === '1' || item.F_ApperenceCode === '')
						? '/static/image/common/weld/success.png'
						: '/static/image/common/weld/fail.png';
			},
			/**
			 * 给获取到的数据添加totalResult字段，该字段是显示整个电熔状态的，包括成功与否以及外观合格与否
			 * 给获取到的数据添加finalColor字段，该字段是决定列表的右侧文字显示什么颜色
			 * @param item 热熔记录
			 */
			assignTotalResultAndColor(item) {
				let message;
				let color;
				if (item.F_ResultCode !== "1") {
					message = item.F_Result;
					color = '#DC2115';
				} else if (item.F_ApperenceCode === "") {
					message = item.F_Result + "/" + "外观评定暂无";
					color = '#999';
				} else if (item.F_ApperenceCode !== "1") {
					message = item.F_Result + "/" + "外观不合格";
					color = '#DC2115';
				} else {
					message = item.F_Result;
					color = '#999'
				}
				item.totalResult = message;
				item.finalColor = color;
			},
			/**
			 * 修改page参数
			 * 这里只是单纯修改，请配合getList方法一起使用
			 * @param page 修改为第几页
			 */
			changePage(page) {
				this.query.pagination.page = page;
			},
			/**
			 * 下拉刷新时处理query，除了page设置为1外，其他都不变
			 */
			refreshQuery() {
				this.changePage(1);
			},
			/**
			 * 自增page
			 */
			incrementPageForQuery() {
				let current = this.query.pagination.page;
				this.changePage(current + 1);
			},
			/**
			 * 跳转到项目的详情页
			 * @param index 记录在electricList中的索引
			 */
			toElectricDetail(index) {
				uni.showLoading({
					title: '加载中，请稍后',
					mask: true
				})
				let electric = this.electricList[index];
				uni.navigateTo({
					url: '/pages/electric/detail?electric=' + encodeURIComponent(JSON.stringify(electric))
				})
				uni.hideLoading();
			}
		},
		/**
		 * 开始下拉刷新
		 */
		onPullDownRefresh () {
			// 将page更新为1
			this.refreshQuery();
			// 获取数据
			this.getList();
			// 停止下拉刷新
			uni.stopPullDownRefresh();
		},
		/**
		 * 触发上拉加载更多
		 */
		onReachBottom () {
			// 判断是不是已经到底部了，到底部就不去加载了
			if (this.query.pagination.page === this.total) {
				return;
			}
			// 设置为上拉加载更多
			this.ifLoadMore = true;
			// 使page自增1
			this.incrementPageForQuery();
			// 获取数据
			this.getList(() => {
				// 做完后恢复ifLoadMore为false
				this.ifLoadMore = false;
			});
		},
		components: {
			uniList, uniListItem
		},
		/**
		 * 在onReady里获取符合条件的项目记录
		 */
    onReady() {
      this.getList();
      this.$refs.message.setMessageToStore(this.$refs.message)
    },
		/**
		 * 在onLoad里给搜索条件赋值
		 * @param options 从search里传递过来的参数
		 */
		onLoad(options) {
			if (JSON.stringify(options) !== "{}") {
				let query = JSON.parse(decodeURIComponent(options.query));
				if (query) {
					this.query.queryJson = query;
				}
			}
		},
    /**
     * 点击右上角首页按钮，跳转到首页
     */
    onNavigationBarButtonTap() {
      store.commit('returnToHome')
    }
	}
</script>

<style scoped lang="scss">
	@import "~@/static/css/weld/list.scss";
</style>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>
